<!--
 * @Author: GGbeng
 * @Date: 2021-12-30 10:58:31
 * @LastEditTime: 2022-01-10 17:35:32
 * @Description: 
 * @FilePath: /hisapp/pages/chargesApply/index.vue
-->
<template>
	<view>
		<view class="bigBox">
			<view v-if="feeData.length > 0">
				<view
					style="padding: 30rpx; background: #fff; margin-bottom: 10rpx"
					v-for="(item, index) in feeData"
					:key="index"
					@click="feeDataParticulars(item)"
				>
					<!-- <view class="content"
					><view>医院：</view><text>{{ item.orgName }}</text></view
				> -->
					<!-- <view class="content"
					><view>申请名称：</view><text>{{ item.formName }}</text></view
				>
				<view class="content"
					><view>申请日期：</view><text>{{ item.applyDate }}</text></view
				>
				<view class="content"
					><view>申请时间段：</view><text>{{ item.timeSlot }}</text></view
				> -->
					<view class="content">
						<view class="content-top" style="margin-bottom: 10rpx">
							<view class="title">{{ item.formName }}</view>
							<view
								:style="{
									color: computedColor(item.isCancel, item.chargeFlag),
								}"
								>{{ computedStatus(item.isCancel, item.chargeFlag) }}</view
							>
						</view>
						<view style="display: flex"
							><view>申请日期：</view
							><text>{{ item.applyDate.split(' ')[0] }}</text></view
						>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<view class="safe"></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { applicationForm } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			feeData: [],
			chargeflagOptions: {
				0: '未缴费',
				1: '已缴费',
				2: '已退费',
				3: '退款中',
			},
			iscancelOptions: {
				0: '未取消',
				1: '已取消',
			},
		}
	},
	onLoad() {
		this.applicationFormList()
	},
	onUnload: function () {
		//页面被卸载时被执行
		uni.switchTab({
			url: '/pages/index/index',
		})
	},
	computed: {
		...mapState({
			patientIdentity: state => state.patientIdentity,
			orgId: state => state.orgId,
		}),
	},
	methods: {
		computedStatus(iscancel, chargeflag) {
			if (chargeflag != 0 && chargeflag) {
				return this.chargeflagOptions[chargeflag]
			} else if (iscancel != 0 && iscancel) {
				return this.iscancelOptions[iscancel]
			} else {
				return this.chargeflagOptions[chargeflag]
			}
		},
		computedColor(iscancel, chargeflag) {
			if (chargeflag != 0 && chargeflag) {
				return this.chargeflagOptions[chargeflag] == '已缴费'
					? '#19be6b'
					: '#fa3534'
			} else if (iscancel != 0 && iscancel) {
				return '#fa3534'
			} else {
				return '#ff9900'
			}
		},
		rTime(date) {
			let json_date = new Date(date).toJSON()
			return new Date(new Date(json_date) + 8 * 3600 * 1000)
				.toISOString()
				.replace(/T/g, ' ')
				.replace(/\.[\d]{3}Z/, '')
		},
		applicationFormList() {
			applicationForm({ idCard: this.patientIdentity, orgId: this.orgId }).then(
				({ data, head }) => {
					// console.log(data, '123')
					if (head.code == 200) {
						this.feeData = data
					} else {
						this.$refs.uToast.show({
							title: head.msg,
							type: 'error',
							duration: 1500,
						})
					}
				},
			)
		},
		feeDataParticulars(item) {
			this.$router.navigateTo({
				url: `/pages/chargesApply/particulars?parameter=${JSON.stringify(
					item,
				)}`,
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background: #f3f3f3;
}
.content {
	// display: flex;
	margin-top: 10px;
	.content-top {
		display: flex;
		justify-content: space-between;
		.title {
			font-weight: 600;
			font-size: 32rpx;
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>